<template>
 <!--使用根模块里面state的数据-->
   <div>{{$store.state.username}}</div>
   <button @click="fn">改变姓名</button>
   <button @click="$store.commit('editName')">改变</button>
   <button @click="$store.dispatch('updateName')">3秒后改变</button>
   <!--使用根模块getters的数据-->
   <div>{{$store.getters['newName']}}</div>

</template>

<script>
import { useStore } from 'vuex';
export default{
   name:'App',
   setup(){
     //使用vuex仓库
     const store=useStore();
    // 使用根模块里面state的数据
    console.log(store.state.username);
    // 使用根模块getters的数据
    console.log(store.getters.newName);
    
    // store.commit('editName')
    //调用根模块mutations函数
    const fn=()=>{
      store.commit('editName')
    }
    // 调用根模块action函数
    // store.dispatch('updateName')
  
    return {fn}
   }
}
</script>


<style>

</style>
